<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vue-router.js"></script>
	</head>

	<body>
		<div id="app">
			<router-link to="/account">account</router-link>
			<router-view></router-view>
		</div>

		<template id="account">
			<div>
				<h1>这是父路由</h1>

				<router-link to="/account/login">登录</router-link>
				<router-link to="/account/register">注册</router-link>

				<router-view></router-view>
			</div>
		</template>
	</body>
	<script>
		var login = {
			template: '<h3>登录</h3>'
		}

		var register = {
			template: '<h3>注册</h3>'
		}

		var account = {
			template: '#account'
		};
		var router = new VueRouter({
			routes: [{
				path: '/account',
				component: account,
				/**
				 * 用于定义子路由规则
				 * 	path: 值前不加 / ，router-link中的连接使用绝对引用
				 */
				children: [{
					path: '/',
					redirect: "login"
				}, {
					path: 'login',
					component: login
				}, {
					path: 'register',
					component: register
				}, ]
			}],

		});

		var vue = new Vue({
			el: "#app",
			data: {

			},
			methods: {},
			router
		});
	</script>

</html>